<template>
 <div v-move class="box">
  <div class="header"></div>
  <div>内容</div>
</div>
</template>
<script setup lang='ts'>
import { Directive ,DirectiveBinding} from 'vue'
const vMove: Directive = (el: HTMLElement, bingding: DirectiveBinding)=>{
  let moveElement: HTMLElement = el.firstElementChild as HTMLElement
  // console.log(moveElement);
  const mousedown = (e: MouseEvent)=>{
    let X = e.clientX - el.offsetLeft
    let Y = e.clientX - el.offsetTop
    console.log(X,Y)
    const move = (e:MouseEvent)=>{
      
      el.style.left = e.clientX - X + 'px'
      el.style.top = e.clientY - Y +'px'
    }
    document.addEventListener('mousemove',move)
    document.addEventListener('mouseup',()=>{
      document.removeEventListener('mousemove', move)
    })
  }
  moveElement.addEventListener('mousedown', mousedown)
 }

</script>
<style scoped lang='less'>
.box{
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 200px;
height: 200px;
border: 3px solid black;
.header{
  height: 20px;
  background: black;
}
}
</style>